<template>
    <div class="star-rating">
        <text v-for="n in max_no" class="bg-text start-text">&star;</text>
        <div class="star-rating__current" :style="{width: getRating}">
            <text v-for="n in max_no" class="active-text start-text">&starf;</text>
        </div>
    </div>
</template>

<script>
    export default {
        name: "start",
        props: {
            max_no: {
                type: Number,
                default: 5
            },
            current: {
                type: Number,
                default: 0
            },
        },
        data() {
            return {
                font_size: 30,
            }
        },
        computed: {
            getRating: function () {
                return (this.current / 10)* (this.max_no * this.font_size) + 'px';
            }
        }
    }
</script>

<style scoped>
    .star-rating {
        flex-direction: row;
        position: relative;
    }
    .bg-text{
        color: #666666;
    }
    .start-text{
        font-size: 30px;
    }
    .star-rating__current {
        flex-direction: row;
        position: absolute;
        left: 0;
        overflow: hidden;
    }
    .active-text{
        color: #ffbf10;
    }
</style>